/**
 * 页面加载器组件
 * 负责动态加载和管理页面内容
 */
class PageLoader {
    constructor() {
        this.pages = new Map();
        this.currentPage = null;
        this.loadedPages = new Set();
        this.pageHandlers = new Map();
    }

    /**
     * 初始化页面加载器
     */
    async init() {
        try {
            // 预加载所有页面
            await this.preloadPages();
            console.log('[PageLoader] 页面加载器初始化完成');
        } catch (error) {
            console.error('[PageLoader] 页面加载器初始化失败:', error);
        }
    }

    /**
     * 预加载所有页面
     */
    async preloadPages() {
        const pageConfigs = [
            { id: 'home', file: 'pages/home.html' },
            { id: 'setup', file: 'pages/setup.html' },
            { id: 'tasks', file: 'pages/tasks.html' },
            { id: 'history', file: 'pages/history.html' }
        ];

        const loadPromises = pageConfigs.map(config => this.loadPage(config.id, config.file));
        await Promise.all(loadPromises);
    }

    /**
     * 加载单个页面
     * @param {string} pageId - 页面ID
     * @param {string} filePath - 文件路径
     */
    async loadPage(pageId, filePath) {
        try {
            const response = await fetch(filePath);
            if (!response.ok) {
                throw new Error(`Failed to load page: ${response.status}`);
            }
            
            const content = await response.text();
            this.pages.set(pageId, content);
            this.loadedPages.add(pageId);
            
            console.log(`[PageLoader] 页面 ${pageId} 加载成功`);
        } catch (error) {
            console.error(`[PageLoader] 页面 ${pageId} 加载失败:`, error);
            // 设置错误页面内容
            this.pages.set(pageId, this.getErrorPageContent(pageId, error.message));
        }
    }

    /**
     * 获取错误页面内容
     * @param {string} pageId - 页面ID
     * @param {string} errorMessage - 错误信息
     */
    getErrorPageContent(pageId, errorMessage) {
        return `
            <div class="tab-content" id="${pageId}">
                <div class="error-page">
                    <div class="error-icon">
                        <i class="fas fa-exclamation-triangle"></i>
                    </div>
                    <h2>页面加载失败</h2>
                    <p>无法加载页面内容，请刷新重试</p>
                    <div class="error-details">
                        <small>错误信息: ${errorMessage}</small>
                    </div>
                    <button class="btn-primary" onclick="location.reload()">
                        <i class="fas fa-refresh"></i>
                        刷新页面
                    </button>
                </div>
            </div>
        `;
    }

    /**
     * 显示指定页面
     * @param {string} pageId - 页面ID
     * @param {string} containerId - 容器ID
     */
    async showPage(pageId, containerId = 'main-content') {
        try {
            // 隐藏当前页面
            this.hideCurrentPage();

            // 获取页面内容
            let pageContent = this.pages.get(pageId);
            
            // 如果页面未加载，尝试加载
            if (!pageContent) {
                await this.loadPage(pageId, `pages/${pageId}.html`);
                pageContent = this.pages.get(pageId);
            }

            // 显示新页面
            const container = document.getElementById(containerId);
            if (container && pageContent) {
                container.innerHTML = pageContent;
                this.currentPage = pageId;
                
                // 触发页面显示事件
                this.onPageShown(pageId);
                
                console.log(`[PageLoader] 页面 ${pageId} 显示成功`);
            } else {
                throw new Error(`Container ${containerId} not found or page content is empty`);
            }
        } catch (error) {
            console.error(`[PageLoader] 显示页面 ${pageId} 失败:`, error);
            this.showErrorPage(pageId, error.message);
        }
    }

    /**
     * 隐藏当前页面
     */
    hideCurrentPage() {
        if (this.currentPage) {
            const currentPageElement = document.getElementById(this.currentPage);
            if (currentPageElement) {
                currentPageElement.style.display = 'none';
            }
        }
    }

    /**
     * 显示错误页面
     * @param {string} pageId - 页面ID
     * @param {string} errorMessage - 错误信息
     */
    showErrorPage(pageId, errorMessage) {
        const container = document.getElementById('main-content');
        if (container) {
            container.innerHTML = this.getErrorPageContent(pageId, errorMessage);
        }
    }

    /**
     * 页面显示后的回调
     * @param {string} pageId - 页面ID
     */
    onPageShown(pageId) {
        // 触发自定义事件
        const event = new CustomEvent('pageShown', {
            detail: { pageId }
        });
        document.dispatchEvent(event);

        // 执行页面特定的初始化逻辑
        this.initializePage(pageId);
    }

    /**
     * 初始化页面特定逻辑
     * @param {string} pageId - 页面ID
     */
    initializePage(pageId) {
        const handler = this.pageHandlers.get(pageId);
        if (handler && typeof handler.init === 'function') {
            handler.init();
        } else {
            console.warn(`[PageLoader] 未找到页面 ${pageId} 的处理器`);
        }
    }

    /**
     * 注册页面处理器
     * @param {string} pageId - 页面ID
     * @param {Object} handler - 页面处理器实例
     */
    registerPageHandler(pageId, handler) {
        this.pageHandlers.set(pageId, handler);
        console.log(`[PageLoader] 注册页面处理器: ${pageId}`);
    }

    /**
     * 获取页面内容
     * @param {string} pageId - 页面ID
     */
    getPageContent(pageId) {
        return this.pages.get(pageId);
    }

    /**
     * 检查页面是否已加载
     * @param {string} pageId - 页面ID
     */
    isPageLoaded(pageId) {
        return this.loadedPages.has(pageId);
    }

    /**
     * 重新加载页面
     * @param {string} pageId - 页面ID
     */
    async reloadPage(pageId) {
        try {
            await this.loadPage(pageId, `pages/${pageId}.html`);
            console.log(`[PageLoader] 页面 ${pageId} 重新加载成功`);
        } catch (error) {
            console.error(`[PageLoader] 页面 ${pageId} 重新加载失败:`, error);
        }
    }

    /**
     * 清理页面缓存
     */
    clearCache() {
        this.pages.clear();
        this.loadedPages.clear();
        this.currentPage = null;
        console.log('[PageLoader] 页面缓存已清理');
    }

    /**
     * 清理页面处理器
     */
    cleanup() {
        // 清理所有页面处理器
        this.pageHandlers.forEach((handler, pageId) => {
            if (handler && typeof handler.cleanup === 'function') {
                handler.cleanup();
            }
        });
        this.pageHandlers.clear();
        console.log('[PageLoader] 页面处理器已清理');
    }
}

// 创建全局页面加载器实例
window.pageLoader = new PageLoader();

// 全局函数，供HTML中的onclick事件调用
window.enterTask = function(taskId) {
    console.log('[Global] 进入任务:', taskId);
    
    if (window.pageLoader) {
        const historyHandler = window.pageLoader.pageHandlers.get('history');
        if (historyHandler && typeof historyHandler.handleEnterTask === 'function') {
            historyHandler.handleEnterTask(taskId);
        }
    }
};